<template>
  <main>
    <h3>Home我是首页</h3>
    <h4 @click="messageHandler">GUID: {{ currGuid }}</h4>
    <span>{{ currGuid }}</span>

  </main>
</template>

<script>
import Nav from "./NavView.vue";
import { reactive, onUpdated, onMounted, onUnmounted, toRefs, ref } from 'vue';

export default {
  // setup() {
  //   // 初始化项目工作都放在setup中
  //   console.log("当前应用程序被安装了");
  //   const guid = ref("aaa")
  //   const state = reactive({ // 定义状态
  //     msg: '学而时习之', // 定义变量
  //     changeMsg: () => { // 定义方法
  //       state.msg = '不亦说乎'
  //     }
  //   })
  //   let timer = 0;
  //   let count = 0;
  //   onMounted(() => {
  //     console.log('页面挂载完成，触发了onMounted钩子函数');

  //     // timer = setInterval(() => {
  //     //   console.log('定时器正在运行中', count++)
  //     // }, 1000)
  //   })
  //   onUpdated(() => {
  //     console.log('数据发生了更新，触发了onUpdated钩子函数')
  //   })
  //   onUnmounted(() => {
  //     console.log('页面/组件退出，触发了onUnmounted钩子函数')
  //     // 如果不清楚，这些异步的行为就会常驻在内存中，一定程度上会造成常驻内存的不必要消耗，造成内存泄露
  //     clearInterval(timer);
  //   })
  //   function setGuid() {
  //     guid = createGuid();
  //   }
  //   function createGuid() {
  //     var d = new Date().getTime();
  //     var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
  //       var r = (d + Math.random() * 16) % 16 | 0;
  //       d = Math.floor(d / 16);
  //       return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
  //     });
  //     return uuid;
  //   }
  //   return {
  //     ...toRefs(state)
  //   }
  // }

  data() {
    return {
      currGuid: "哈哈哈",
      isIfNull: "空",
    }
  },
  // components: {
  //   Nav
  // },
  mounted() {
    this.currGuid = this.createGuid();
  },
  methods: {
    messageHandler() {
      // let currGuid = this.createGuid();
      // alert(currGuid);
      if (this.isIfNull) {
        alert("true");
      }
      else {
        alert("false")
      }
    },
    createGuid() {
      // /**
      //  * 第一种
      //  */
      // var d = new Date().getTime();
      // var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
      //   var r = (d + Math.random() * 16) % 16 | 0;
      //   d = Math.floor(d / 16);
      //   return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
      // });
      // return uuid;
      // /**
      //  * 第二种
      //  */
      // return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
      //   var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
      //   return v.toString(16);
      // });

      // /**
      //  * 第三种
      //  */
      // function S4() {
      //   return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
      // }
      // return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());

      /**
       * 第四种
       */
      var s = [];
      var hexDigits = "0123456789abcdef";
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = "-";
      // s[8] = s[13] = s[18] = s[23] = "";

      var uuid = s.join("");
      return uuid;


    }
  }
}
</script>
